import { useState } from "react";
//防抖的定时器变量
let debounceTimeout = null;
const TodoInput = (props) => {

    // console.log(props)
    //解构父组件传递下来的状态
    let { content, setContent, add } = props;
    let [iptVal, setIptVal] = useState("")
    //点击按钮的处理函数
    const handleSubmit = () => {
        add()
        setIptVal("")
    }
    // 输入发生变化的时候处理函数
    const handleInputChange = (e) => {
        setIptVal(e.target.value)
        //对输入框进行防抖处理
        if (debounceTimeout) {
            clearTimeout(debounceTimeout)
        }
        debounceTimeout = setTimeout(() => {
            setContent(e.target.value)
        }, 300)
    }

    return (
        <div className="form-field">
            <h1 className="title" >~ 开始努力写代码了 ~</h1>
            <div className="form-wrapper" >
                <div className="form-input" >
                    <input value={iptVal} onChange={handleInputChange} placeholder="添加要做的事儿..." autoFocus="" />
                </div>
                <button onClick={handleSubmit} type="submit" className="submit-btn" >
                    <span >提交</span>
                </button>
            </div>
        </div>
    )
}

export default TodoInput